<script>
	import { fade, fly } from 'svelte/transition';
	import { elasticOut, elasticIn, elasticInOut } from 'svelte/easing';
	let items = ['a', 'b', 'v', 'd'];

	function spin(node, { duration }) {
		return {
			duration,
			css: (t) => {
				const eased = elasticOut(t);
				return `transform: scale(${eased}) rotate(${eased * 1080}deg);
        color: hsl(
						${~~(t * 360)},
						${Math.min(100, 1000 - 1000 * t)}%,
						${Math.min(50, 500 - 500 * t)}%
					);`;
			}
		};
	}
	let count = 0;
	setInterval(() => {
		count++;
	}, 1000);
</script>

<div class="items-end h-20 ">
	{#key count}
		<div class="absolute h-10 " in:fade out:fly={{ y: -10 }}>{count}</div>
	{/key}
</div>
{#each items as item, i}
	<div in:fly={{ delay: i * 300, duration: 1000, x: 200 }}>{item}</div>
{/each}
<!-- {#each items as item, i}
	<div in:spin={{ duration: 2000 }}>{item}</div>
{/each} -->
